<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>客户管理</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

</head>
<body>
<div id="app">



    <el-table      :data="tableData.rows"         border          style="width: 100%">
        <el-table-column     prop="id"     label="编号"  width="180"> </el-table-column>
        <el-table-column      prop="loginid" label="账户"  width="180">  </el-table-column>

    </el-table>

    <!-- 分页条 -->
    <el-pagination
            v-if="tableData.total>0"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryParam.page"
            :page-sizes="[1, 5, 10, 20,30,50,100]"
            :page-size="queryParam.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.total">
    </el-pagination>

</div>

</body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>

    var app = new Vue({
        el: '#app',
        data: {
            tableData: {
                rows:[],
                total: 0
            },
            queryParam: {
                page:1,
                size:10
            }
        },
        methods: {
            fetchData(){
                axios.get('/contamer/data', {
                    params: this.queryParam
                }) .then( resp => {
                    const respData = resp.data
                    if(respData.code===200){
                        this.tableData = respData.data
                    }else{
                        //提示错误
                        this.$message.error( json.msg);
                    }
                })
                 .catch( e =>{
                     this.$message.error( e);
               } );
            },
            handleSizeChange(val) {
                //每页几笔
                this.queryParam.page=1
                this.queryParam.size = val
                this.fetchData()
            },
            handleCurrentChange(val) {
                this.queryParam.page=val
                this.fetchData()
            }
        },
        created(){
            this.fetchData()
        }
    })


</script>
</html>